<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、按钮</h3>
        <div>
          <h4>1.1、基本使用</h4>
          <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary" plain round>主要按钮</el-button>
            <!-- <el-button type="success" icon="el-icon-edit" circle>成功按钮</el-button> -->
            <el-button type="danger">危险按钮</el-button>

            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>

            <el-button type="text">文字按钮</el-button>

            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>

            <div>

              <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-button-group>
            </div>

            <div>
              <el-button type="primary" :loading="loading">加载中</el-button>
            </div>

            <div>
              <el-button @click="clickBu()">默认按钮</el-button>
              <el-button size="medium">中等按钮</el-button>
              <el-button size="small">小型按钮</el-button>
              <el-button size="mini">超小按钮</el-button>
            </div>

          </el-row>

        </div>
      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、文字链接</h3>
        <div>
          <h4>2.1、基础用法</h4>
          <el-link href="https://element.eleme.io">默认链接</el-link>
          <el-link type="primary">主要链接</el-link>
          <el-link type="success">成功链接</el-link>
          <el-link type="warning">警告链接</el-link>
          <el-link type="danger">危险链接</el-link>
          <el-link type="info">信息链接</el-link>
        </div>

        <div style="margin-top:50px">
          <h4>2.2、下划线</h4>
          <el-link :underline="false">无下划线</el-link>
          <el-link>有下划线</el-link>
        </div>

        <div style="margin-top:50px">
          <h4>2.3、带图标</h4>
          <el-link icon="el-icon-edit">编辑</el-link>
          <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true

    }
  },
  methods: {
    clickBu () {
      console.log(2312321312321)

    }
  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>